<template>
    <div class="login">
      <h2>登录</h2>
      <form @submit.prevent="handleSubmit">
        <div>
          <label for="email">电子邮件：</label>
          <input type="email" v-model="email" required />
        </div>
        <div>
          <label for="password">密码：</label>
          <input type="password" v-model="password" required />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        email: '',
        password: ''
      };
    },
    methods: {
      handleSubmit() {
        if (this.email && this.password) {
          alert(`邮件: ${this.email}\n密码: ${this.password}`);
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .login {
    max-width: 300px;
    margin: 0 auto;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .login div {
    margin-bottom: 1em;
  }
  
  .login label {
    margin-bottom: .5em;
    color: #333333;
  }
  
  .login input {
    border: 1px solid #ddd;
    width: 100%;
    padding: .5em;
  }
  
  .login button {
    padding: 0.7em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  </style>